<template>
	<div class="addProject business-workAdd">
		<div class="addForm zll-form">
			<div class="Search_Top_Input">
				<div class="search_list">
					<div class="input_flex daterange">
						<el-date-picker v-model="time" type="daterange"
										range-separator="-"
										start-placeholder="处理日期"
										end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
				<div class="search_bt">
					<span class="zll-search" @click="getList">搜索</span>
					<span class="zll-search-reset" @click="searchReset()">重置</span>
				</div>
			</div>
			<div class="main_contain">
				<div v-if="!isSearch" class="no_search">
					<img src="@/assets/back_manage_img/date_search.png" alt="">
					<p>请输入或选择日期进行查询</p>
				</div>
				<div v-else v-loading="tableLoading">
					<div v-if="tableList.length > 0">
						<div class="top_list">
							<div class="input_flex">
								<span class="_left">查询时段：</span>
								<span>{{showTime}}</span>
							</div>
							<div class="input_flex">
								<span class="_left">查询人：</span>
								<span>{{user.userName}}</span>
							</div>
							<div class="input_flex">
								<span class="_left">查询日期：</span>
								<span>{{queryTime}}</span>
							</div>
						</div>
						<div class="tableList">
							<table class="banzu_table">
								<tr >
									<td width="22%"><p>白班</p></td>
									<td width="13%"><p>{{baiban.v1}}</p></td>
									<td width="13%"><p>{{baiban.v2}}</p></td>
									<td width="13%"><p>{{baiban.v3}}</p></td>
									<td width="13%"><p>{{baiban.v4}}</p></td>
									<td width="13%"><p>{{baiban.v5}}</p></td>
									<td width="13%"><p>{{baiban.v6}}</p></td>
								</tr>
								<tr >
									<td width="22%"><p>夜班</p></td>
									<td width="13%"><p>{{yeban.v1}}</p></td>
									<td width="13%"><p>{{yeban.v2}}</p></td>
									<td width="13%"><p>{{yeban.v3}}</p></td>
									<td width="13%"><p>{{yeban.v4}}</p></td>
									<td width="13%"><p>{{yeban.v5}}</p></td>
									<td width="13%"><p>{{yeban.v6}}</p></td>
								</tr>
							</table>
							<table>
								<tr>
									<th width="22%">班次/工序</th>
									<th width="13%">料头</th>
									<th width="13%">可回收</th>
									<th width="13%">不可回收</th>
									<th width="13%">彩膜</th>
									<th width="13%">合计</th>
									<th width="13%">总占比%</th>
								</tr>
								<tr v-for="(item,index) in tableList" :key="index">
									<td width="22%"><p>{{item.name}}</p></td>
									<td width="13%"><p>{{item.v1}}</p></td>
									<td width="13%"><p>{{item.v2}}</p></td>
									<td width="13%"><p>{{item.v3}}</p></td>
									<td width="13%"><p>{{item.v4}}</p></td>
									<td width="13%"><p>{{item.v5}}</p></td>
									<td width="13%"><p>{{item.v6}}</p></td>
								</tr>
							</table>
							<table class="heji_table">
								<tr>
									<td width="22%"><p>合计</p></td>
									<td width="13%"><p>{{totalVo.v1}}</p></td>
									<td width="13%"><p>{{totalVo.v2}}</p></td>
									<td width="13%"><p>{{totalVo.v3}}</p></td>
									<td width="13%"><p>{{totalVo.v4}}</p></td>
									<td width="13%"><p>{{totalVo.v5}}</p></td>
									<td width="13%"><p></p></td>
								</tr>
								<tr>
									<td width="22%"><p>总占比%</p></td>
									<td width="13%"><p>{{totalPercent.v1}}</p></td>
									<td width="13%"><p>{{totalPercent.v2}}</p></td>
									<td width="13%"><p>{{totalPercent.v3}}</p></td>
									<td width="13%"><p>{{totalPercent.v4}}</p></td>
									<td width="13%"><p></p></td>
									<td width="13%"><p></p></td>
								</tr>
							</table>
						</div>
					</div>
					<div v-else class="no_search no_data">
						<img src="@/assets/back_manage_img/fenxi_nodata.png" alt="">
						<p>很抱歉，查不到您想要的数据</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>

	import {getStore} from "@/plugins/localStore";
	import {formatDate} from "@/plugins/formatDate";

	export default {
		data() {
			return {
				isSearch: false,//是否搜索
				tableLoading: false,
				tableList: [],
				time: [],
				user: {},
				queryTime:'',
				baiban:{v1:'',v2:'',v3:'',v4:'',v5:'',v6:''},
				yeban:{v1:'',v2:'',v3:'',v4:'',v5:'',v6:''},
				totalVo:{v1:'',v2:'',v3:'',v4:'',v5:'',v6:''},
				totalPercent:{v1:'',v2:'',v3:'',v4:'',v5:'',v6:''},

				showTime:'',
			}
		},
		methods: {
			getList() {
				let self = this;
				if(self.time.length == 0){
					self.$message.warning('请选择时间');
					return;
				}
				self.isSearch = true;
				self.tableLoading = true;
				self.baiban = {v1:'',v2:'',v3:'',v4:'',v5:'',v6:''};
				self.yeban = {v1:'',v2:'',v3:'',v4:'',v5:'',v6:''};
				self.totalVo = {v1:'',v2:'',v3:'',v4:'',v5:'',v6:''};
				self.totalPercent = {v1:'',v2:'',v3:'',v4:'',v5:'',v6:''};
				self.tableList  = [];
				let param = {};
				param.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd');
				param.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59';
				self.showTime =  formatDate(new Date(self.time[0]), 'yyyy-MM-dd')+'至'+ formatDate(new Date(self.time[1]), 'yyyy-MM-dd');
				self.$http({
					url: "/jinl/abandonHandle/getAbandonPercentList",
					method: "post",
					params:param
				}).then(resp => {
					self.tableLoading = false;
					if (resp.success) {
						self.baiban = resp.result.baiban;
						self.yeban = resp.result.yeban;
						self.tableList = resp.result.list||[];
						self.totalVo = resp.result.totalVo;
						self.totalPercent = resp.result.totalPercent;
					}
				});
			},
			searchReset() {
				this.isSearch = false;
				this.time = [];
			}
		},
		mounted() {
			this.user = getStore();
			this.queryTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
		},
		components: {},
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.main_contain {
		.top_list {
			display: flex;

			.input_flex {
				width: 33.333%;

				._left {
					color: #8a8a8a;
					width: 60px;
					display: inline-block;
				}
			}
		}

		.tableList {
			.banzu_table {
				margin-bottom: 10px;

				tr {
					background: #ffe3cc !important;
				}
			}

			.heji_table {
				margin-top: 10px;

				tr {
					background: #ffe3cc !important;
				}
			}

			td, th {
				height: 25px !important;
				line-height: 25px !important;
			}
		}

		.no_search {
			width: 100%;
			height: 200px;
			color: #8a8a8a;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			img {
				width: 50px;
				margin-bottom: 10px;
			}
		}

		.no_data {
			color: #4d91aa;
		}
	}

	.Search_Top_Input {
		width: 50%;

		.daterange {
			width: 200px;
		}
	}
</style>